<script lang="ts">
import { defineComponent } from "vue";
import { useList } from "@/hooks/page";
import { guider_work_guider_list_api } from "@/package/guider/api/guider_didi";
import { Router } from "@/utils/router";

import ListMore from "@/components/list/more.vue";
import IndexMemberItem from "./index-member-item.vue";

export default defineComponent({
  components: { ListMore, IndexMemberItem },
  props: {
    id: { type: String, required: true },
  },
  setup(props) {
    const { listData, listStatus, listLoadMore, reloadList, loadMoreList } =
      useList({ page: 1, page_size: 10 }, (query) => {
        return guider_work_guider_list_api({
          ...query,
          work_id: props.id,
        });
      });
    reloadList();

    const memberClick = (id: string) => {
      Router.navigateTo(`/package/guider/pages/detail/index?id=${id}`);
    };

    return {
      listData,
      listStatus,
      listLoadMore,
      loadMoreList,
      memberClick,
    };
  },
});
</script>

<template>
  <scroll-view
    class="member"
    scroll-y
    @scroll="listLoadMore = true"
    @scrolltolower="loadMoreList"
  >
    <view class="member-data">
      <view
        class="member-data-item"
        v-for="i of listData"
        :key="i.guider_id"
        @click="memberClick(i.guider_id)"
      >
        <IndexMemberItem :info="i" />
      </view>
    </view>
    <ListMore v-if="listLoadMore" :status="listStatus" safeAreaInsetBottom />
  </scroll-view>
</template>

<style lang="scss">
.member {
  position: relative;
  height: 100%;

  .member-data {
    display: flex;
    flex-wrap: wrap;
    padding-left: 30rpx;
    padding-top: 20rpx;
  }

  .member-data-item {
    width: 336rpx;
    margin-right: 18rpx;
    margin-bottom: 20rpx;
  }
}
</style>